<template>
  <div class="login-wrap">
      <NavBar />
      <el-form class="login-container">
          <h1 class="title">用户登录</h1>
          <el-form-item label="">
              <el-input type="text" v-model="phone" placeholder="登录账号" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="">
              <el-input type="password" v-model="password" placeholder="登录密码" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item>
              <el-button type="primary" style="width:100%;" @click="doSubmit()">提交</el-button>
          </el-form-item>
          <el-row style="text-align: center;margin-top:-10px">
              <el-link type="primary" @click="gotoRegister()">用户注册</el-link>
          </el-row>
      </el-form>
  </div>
</template>

<script>
import NavBar from '../components/NavBar.vue';
import axios from 'axios'; 
export default {
  name: 'userLogin',
  components: {
      NavBar
  },
  data() {
      return {
          phone: "",
          password: "" 
      }
  },
  methods: {
    doSubmit() {
      axios.post('http://localhost:8081/users/login', {
        phoneNumber: this.phone,
        password: this.password
      })
      .then(response => {
        if (response.status === 200) {
          // 保存token到localStorage
          const token = response.data.token;
          if (token) {
            localStorage.setItem('userToken', token);
            this.$message.success('登录成功！');
            
            this.$router.push('/homepage');
          } else {
            this.$message.error('登录失败，请检查账号和密码是否正确！');
          }
        } else {
          this.$message.error('登录失败，请检查账号和密码是否正确！');
        }
      })
      .catch(error => {
        this.$message.error('登录请求失败，请稍后再试！');
        console.error('Error during login:', error);
      });
    },
    gotoRegister() {
      // 跳转到注册页面
      this.$router.push('/register');
    }
  }
}
</script>

<style scoped>
.login-wrap {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding-top: 10%;
  background-repeat: no-repeat;
  background-position: center right;
  background-size: 100%;
}

.login-container {
  border-radius: 10px;
  margin: 0px auto;
  width: 350px;
  padding: 30px 35px 15px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  text-align: left;
  box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
}

.title {
  margin: 0px auto 40px auto;
  text-align: center;
  color: #505458;
}
</style>